<template>
    <Grid :column-num="4">
        <template v-for="item, prop in griditems" :key="prop">
            <div v-if="item == 'br'" class="title">{{ prop }}</div>
            <GridItem v-else style="background-color: transparent;" :text="item.name" @click="onRouter(item.router)">
                <Image :src="item.img" style="width: 14vw;height: 14vw;border-radius: 12px;overflow: hidden;"></Image>
                <div style="margin-top: .4em;">{{ item.name }}</div>
            </GridItem>
        </template>
    </Grid>
</template>

<script lang="ts" setup>
import { Grid, GridItem, Image } from "vant";
import { computed, reactive } from "vue";
import { useRouter } from "vue-router";
import { headStore } from "@b/store";
const router = useRouter()
const asideOption = computed(() => headStore().asideOption)
const griditems = reactive<Record<string, interfaceMenu | 'br'>>({})

const setGriditems = (items: interfaceMenu[]) => {
    items.forEach((value) => {
        if (value.type == 0) {
            griditems[value.name] = 'br'
            value.childMenus?.forEach((value) => {
                griditems[value.router] = value
            })
        } else {
            griditems[value.router] = value
        }
    });
}
setGriditems(asideOption.value)
const onRouter = (url: string) => {
    router.push(url)
}
</script>
<style scoped>
.van-grid {
    background-color: var(--van-background);
    --van-grid-item-content-padding: var(--van-padding-xs) var(--van-padding-xs)
}

.title {
    width: 100%;
    padding: 6px 20px;
    border: 1px solid var(--van-border-color);
    font-size: 0.85em;
}
</style>